<template>
    <div class="windowHeader" flex-item="0">
        <div class="logo">
            <img src="../../assets/image/logo.png" alt="">
            <span>图文识别</span>
        </div>

        <!-- 19.11.16 新增回复弹窗 -->
        <div
            class="qa-log"
        >
             <vi-popover
                placement="bottomRight"
                trigger="click"
                :align="qapopoverObj"
                v-model="qaVisible"
            >

            <template slot="content">
                <div class="qa-dropdown">
                    <div
                        class="qa-dropdown-btn qa-dropdown-postQa"
                        @click="qaBtnStatusChange(1)"
                    >
                        反馈问题
                    </div>
                    <div
                        class="qa-dropdown-btn qa-dropdown-getQa"
                        @click="qaBtnStatusChange(2)"
                    >
                        查看回复
                    </div>
                </div>
            </template>

            <div @click="qaVisibleChange" >
                <img src="../../assets/image/qa.png" alt="问题反馈" >
                <vi-icon type="caret-down" style="font-size: 12px; color: #fff; padding: 0 0 0 3px;" ></vi-icon>
            </div>

            </vi-popover>
        </div>


        <vi-modal
            :title="(qaBtnStatus!==0&&qaBtnStatus==1)?'反馈问题':'查看回复'"
            width="800px"
            class="qa-modal"
            :visible="(qaBtnStatus!==0 && !screenShotsStatus )"
            :destroyOnClose="true"
            :maskClosable="false"
            :footer="null"
            @cancel="qaBtnStatusChange(0)"
        >
            <!-- 弹窗内引入两个组件，根据不同的情况，弹窗内容切换 -->
            <div class="qa-modal-main">
                <postQa
                    v-if="qaBtnStatus==1"
                    :qaBtnStatusChange="qaBtnStatusChange"
                />
                <getQa
                    v-if="qaBtnStatus==2"
                />
            </div>
        </vi-modal>

    </div>
</template>

<script>
import activeShowMixin from "../../mixin/activeShow.mixin";
import postQa from "./postQa";
import getQa from "./getQa";

  export default {
    name: "windowHeader",
    components: { postQa, getQa, },
    mixins: [activeShowMixin],
    data() {
        return{
            qapopoverObj: {
            'offset': [50, 5]
            },
            qaBtnStatus: 0, // 0什么都没点击 1召唤反馈页面 2召唤回复页面
        }
    },
    mounted() {
        // console.log('windowHeader mounted', this.$webSC.status );
        if(this.$webSC.status){
            // this.screenMounted();
        }
    },
    methods: {
        // 遮罩层隐藏
        screenMounted() {
            let pay = {
                code: 6,
                cmd: "Show_suceess",
                };

            this.$webSC.webSCAsync(pay).then(res =>{ });
        },
        //
        qaVisibleChange(){
            if( this.qaVisible ){
                this.qaBtnStatus = 0;
            }
            this.setQaVisible( !this.qaVisible );
        },
        //
        qaBtnStatusChange(status){
            this.qaBtnStatus = status;
            this.setQaVisible( false );
        },
        //
    },
    computed: {
        qaVisible: {
            get() {
                return this.$store.state.status.qaVisible;
            },
            set() {}
        },
        screenShotsStatus() {
            return this.$store.state.status.screenShotsStatus;
        },
    },
  };
</script>

<style lang="less" scoped>
    .windowHeader {
        padding: 8px 16px;
        color: white;
        font-size: 16px;
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        background-color: @primary;

        .list-button {
            display: flex;
        }

        .export {
            img {
                margin-right: 8px;
            }
        }

        .logo {
            display: flex;
            align-items: center;

            img {
                margin-right: 8px;
                width: 32px;
                height: 32px;
            }
        }

        .qa-log{
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }
    }

.qa-dropdown{
    cursor: pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.qa-dropdown-btn{
    height: 32px;
    line-height: 32px;
    width: 100px;
    text-align: center;
    color: #666;
    font-size: 14px;
    &:hover{
        background-color: @primary;
        color: #fff;
    }
}

</style>

<style lang="less">
.qa-modal{
    .ant-modal-header{
        padding: 6px 24px !important;
    }
    .ant-modal-body{
        padding: 0 !important;
    }
}
</style>
